<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue的资源 -->
		<script src="../js/vue.js"></script>
		<!-- 引入element的相关资源 -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入网络传输库axios的js文件 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入qs（进行参数处理问题）js库 -->
		<script src="../js/qs.min.js"></script>
		<style>
		#top{
			/* width: 100%; */
			height: 40px;
			/* background-color: #226699;	 */
			padding-left: 10px;	
			padding-top: 10px;
			color: #808080;
			
		}
		#leftText{
			font-size: 20px;				
			line-height: 20px;
		}
		#rightTest{
			margin-left: 950px;
			
			
		}
		</style>
	</head>
	<body>
		<div id="main">
			<!-- 顶部标题栏 -->
			<div id="top">
				<!-- 顶部左侧系统名字 -->
				<span id="leftText">青软实训教学管理系统</span>
				<span id="rightTest">
					<el-dropdown>
					  <span class="el-dropdown-link">
					    {{personName}},您好！<i class="el-icon-arrow-down el-icon--right"></i>
					  </span>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item>个人信息</el-dropdown-item>
					    <el-dropdown-item>修改密码</el-dropdown-item>
					   
					  </el-dropdown-menu>
					</el-dropdown>
				</span>
			</div>
			
			<!-- 左侧导航 -->
			<el-row class="tac" style="overflow-x: hidden;">
			  <el-col :span="4">			   
			    <el-menu
			      default-active="2"
			      class="el-menu-vertical-demo"
			      >
				  <el-menu-item index="2">
				    <i class="el-icon-menu"></i>
				    <span slot="title">
						<!-- 超链接的target属性可以指定超链接打开的地址，
						可以通过指定iframe标签的name属性值，在指定的区域内进行显示 -->
						<el-link href="firstPage.html" target="showMsg" :underline="false">主页</el-link>
					</span>
				  </el-menu-item>
			      <el-submenu index="1">
			        <template slot="title">
			          <i class="el-icon-setting"></i>
			          <span>系统管理</span>
			        </template>
			        <el-menu-item-group>
			         <el-menu-item index="1-1">
						 <el-link href="userinfoManager/userinfo.html" target="showMsg" :underline="false">用户信息管理</el-link>					 
					 </el-menu-item>
			         <el-menu-item index="1-2">
						 <el-link href="car/alipay.html" target="showMsg" :underline="false">购物车管理</el-link>
					 </el-menu-item>		         
			        </el-menu-item-group>			     
			      </el-submenu>			     
			      <el-menu-item index="3">
			        <i class="el-icon-document"></i>
			        <span slot="title">课程管理</span>
			      </el-menu-item>
			    
			    </el-menu>
			  </el-col>	
			  <!-- 右侧显示区 -->
			  <el-col :span="20">
				  <iframe name="showMsg" width="98%" height="540px" style="background-color:#f5f6fa ;" frameborder="0"></iframe>
			  </el-col>
			</el-row>
			
			
			
			
			
		</div>
		<script>
		var main=new Vue({
			el:"#main",
			data:{
				personName:""
			},
			methods:{
				
			},
			// 钩子函数，页面一加载时会触发
			mounted:function(){
				this.personName=window.localStorage.getItem("username")
			}
		})
		
		
		
		</script>
		
	</body>
</html>
